<template>
  <el-row class="good-item">
    <el-col>
      <a :href="goods.url" target="_blank">
        <el-card :body-style="{ padding: 0 }">
          <div class="good-img">
            <a>
              <img v-lazy="goods.img" alt />
              <div class="info">
                <h3>简介</h3>
                <p v-if="goods.info_1">功能：{{ goods.info_1 }}</p>
                <p v-if="goods.info_2">开发框架：{{ goods.info_2 }}</p>
                <p v-if="goods.info_3">技术栈：{{ goods.info_3 }}</p>
              </div>
            </a>
          </div>
          <h6 class="good-title">{{ goods.title }}</h6>
        </el-card>
      </a>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: ["goods"],
};
</script>

<style lang="scss" scoped>
@import "../style/reset.scss";
.el-col,
.el-card,
.el-card__body {
  border-radius: 15px 15px 0 0;
}
.el-card{
  background-color: #E6EdF7;
}
.good-img {
  justify-content: center;
  border-radius: 15px 15px 0 0;
  a {
    display: block;
    img {
      // margin: 25px auto 10px;
      // width: 230px;
      // height: 280px;
      margin: 0 auto 10px;
      width: 264px;
      height: 305px;
      // width: 253px;
      // height: 308px;
      border-radius: 15px 15px 0 0;
      display: block;
      transition: 0.5s all;
    }
    .info {
      position: absolute;
      // width: 230px;
      // height: 280px;
      // left: 18px;
      // top: 25px;
      width: 266px;
      height: 305px;
      top: 0;
      left: 0;
      color: rgba($color: #fff, $alpha: 0);
      border-radius: 15px 15px 0 0;
      background-color: rgba(0, 0, 0, 0);
      transition: 0.5s all;
      h3 {
        margin: 20px;
        font-size: 30px;
        text-align: center;
      }
      p {
        margin: 30px 5px 30px 20px;
        font-size: 18px;
      }
    }
  }
}
.good-title {
  height: 60px;
  line-height: 3;
  font-size: 16px;
  color: rgba(0, 0, 0, 0);
  margin: 0 auto;
  padding: 0 14px;
  text-align: center;
  overflow: hidden;
  transition: 0.5s all;
}
.good-item {
  position: relative;
  background: #fff;
  margin: 18px 0 15px 20px;
  width: 266px;
  height: 375px;
  // width: 303px;
  // height: 395px;
  border-radius: 15px 15px 0 0;
  transition: all 0.5s;
  &:hover {
    transform: translateY(-3px);
    box-shadow: 1px 1px 20px #999;
    .good-title {
      transition: 0.5s all;
      color: #333333;
    }
    .good-img {
      img {
        // opacity: 0.8;
        transition: 0.5s all;
      }
      .info {
        color: white;
        background-color: rgba(7, 7, 7, 0.44);
        transition: 0.5s all;
      }
    }
  }
}
</style>